<template>

<div class="center-1">
<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
</div>

<div class="center-2">
<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
</div>

<div class="center-3">
<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
</div>

<div class="center-4">
<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
</div>

<div class="center-5">
<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
</div>

<div class="center-6">
<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
</div>

<div class="center-7">
<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
</div>

<div class="center-8">
<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
</div>

<div class="center-9">
<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
</div>



<!--
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
-->
  
</template>

<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>

<style>
.center-1 {
            float: left;
            background-color: rgb(21, 100, 34);
            margin: 50px;
            width: 148px;
            height: 148px;
        }

        .center-2 {
            float: left;
            background-color: rgb(21, 100, 34);
            width: 148px;
            height: 148px;
            margin: 50px;
        }

        .center-3 {
            float: left;
            background-color: rgb(21, 100, 34);
            width: 148px;
            margin: 50px;
            height: 148px;
        }

        .center-4 {
            float: left;
            background-color: rgb(21, 100, 34);
            width: 148px;
            margin: 50px;
            height: 148px;
        }
        .center-5 {
            float: left;
            background-color: rgb(21, 100, 34);
            width: 148px;
            margin: 50px;
            height: 148px;
        } 
        .center-6 {
          float: left;
            background-color: rgb(21, 100, 34);
            width: 148px;
            margin: 50px;
            height: 148px;
        }
        .center-7 {
          float: left;
            background-color: rgb(21, 100, 34);
            width: 148px;
            margin: 50px;
            height: 148px;
        }     
         .center-8 {
           float: left;
            background-color: rgb(21, 100, 34);
            width: 148px;
            margin: 50px;
            height: 148px;
        } 
        .center-9 {
          float: left;
            background-color: rgb(21, 100, 34);
            width: 148px;
            margin: 50px;
            height: 148px;
        }                           

</style>